.flex {
	display: flex;
}
.header {
	width: 1200px;
	margin: 0 auto;
	height: 55px;
	background-color: #fff;
	justify-content: space-between;
	align-items: center;
	.logo {
		width: 160px;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;

		.logo_img {
			width: 35px;
			height: 35px;
		}
		.logo_text {
			width: 110px;
			height: 20px;
		}
	}
	.nav {
		width: 600px;
		li {
			height: 55px;
			line-height: 55px;
			margin: 0 20px;
			font-size: 16px;
			padding: 0 10px;
			cursor: pointer;
			border-bottom: #fff 3px solid;
			float: left;
			font-weight: bold;
			&:hover {
				color: #f49900;
				border-bottom: #f49900 3px solid;
			}
		}
	}
	.person {
		width: 380px;
		justify-content: space-between;
		align-items: center;
		input {
			width: 220px;
			height: 36px;
			background-color: #f5f5f5;
			border: none;
			text-indent: 10px;
		}
		.pen {
			width: 30px;
			height: 30px;
			cursor: pointer;
		}
		.login {
			width: 80px;
			height: 36px;
			text-align: center;
			line-height: 36px;
			color: #f49900;
			border: #f49900 1px solid;
			cursor: pointer;
		}
	}
}
.content {
	margin: 0 auto;
	width: 1160px;
	padding: 20px 15px;
	// height: 2000px;
	background-color: #f5f5f5;
	justify-content: space-around;
	.left {
		width: 840px;
		// height: 2000px;
		background-color: #fff;
		.news {
			justify-content: space-between;
			padding: 15px;
			.news_img {
				width: 120px;
				height: 120px;
			}
			.news_con {
				width: 675px;
				height: 100px;
				.tag {
					display: block;
					color: #fff;
					width: 100px;
					height: 20px;
					background-color: #f49900;
					border-radius: 10px;
					text-align: center;
					line-height: 20px;
				}
				.title {
					color: #333;
					cursor: pointer;
					margin: 10px 0;
					font-weight: bold;
					&:hover {
						color: #654441;
					}
				}
				.url {
					color: #ccc;
					margin-bottom: 10px;
				}
				.bottom {
					width: 600px;
					height: 30px;
					justify-content: space-between;
					.detail {
						.author {
							width: 20px;
							height: 20px;
							border-radius: 100%;
							margin-right: 10px;
						}
						.time {
							color: #ccc;
							line-height: 30px;
						}
					}
					.feedback {
						width: 200px;
						color: #ccc;
						.heat {
							width: 20px;
							padding-left: 30px;
							background: url("../image/recommend-bff29b548b.png") no-repeat
								center left;
							background-size: 40px 30px;
							margin-right: 10px;
						}
						.comment {
							width: 20px;
							padding-left: 30px;
							background: url("../image/comment-d4e0fc5925.png") no-repeat
								center left;
							background-size: 20px 30px;
						}
					}
				}
			}
		}
	}
	.right {
		width: 280px;
		background-color: #fff;
		// height: 1000px;
		.ranking {
			width: 260px;
			padding: 20px 10px;
			.rank_title {
				height: 50px;
				line-height: 50px;
				border-bottom: 1px solid #eee;
				font-weight: bold;
			}
			.rank_content {
				.rank_time {
					margin-top: 20px;
					.rank_24h,
					.rank_3day,
					.rank_week {
						width: 80px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						cursor: pointer;
						&:hover {
							background-color: #f5f5f5;
						}
						&:active {
							background-color: #f5f5f5;
						}
					}
				}
				.rank_con {
					margin-top: 10px;
					.rank_pro {
						width: 260px;
						justify-content: space-around;
margin: 15px 0;
						img {
							width: 80px;
							height: 80px;
						}
						p {
							width: 160px;
							height: 70px;
							display: -webkit-box;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 4;
							-webkit-box-orient: vertical;
						}
					}
				}
			}
		}
	}
}
